<template>
  <div class="indent">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="height: 70px;">
          <!-- 时间选择 -->
          <div class="block">
            <span class="demonstration">时间选择:</span>
            <el-date-picker class="picker" v-model="value2" type="daterange" align="center" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
              size="mini">
            </el-date-picker>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple" style="height: 100px;">
          <!-- <i class="el-icon-edit" ></i>\ -->
          <el-avatar class="users" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
          </el-avatar>
          <div style="margin-left: 20px">
            <!-- <span style="font-size: 24px; color:  #252631; " >149</span> -->
            <!-- 起始值 终点值  滚动时间 -->
            <count-to :start-val="0" :end-val="8888" :duration="1000" style="font-size: 24px; color:  #252631;" />
            <br>
            <span style="font-size: 10px; color: #98a9bc;">订单数</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="height: 100px;">
          <el-avatar class="users"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div style="margin-left: 20px">
            <!-- <span style="font-size: 24px; color:  #252631; " >1888888</span> -->
            <count-to :start-val="0" :end-val="18888" :duration="1000" style="font-size: 24px; color:  #252631;" />
            <br>
            <span style="font-size: 10px; color: #98a9bc;">订单销售额</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="height: 100px;">
          <el-avatar class="users" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
          </el-avatar>
          <div style="margin-left: 20px">
            <!-- <span style="font-size: 24px; color:  #252631; " >44</span> -->
            <count-to :start-val="0" :end-val="666" :duration="1000" style="font-size: 24px; color:  #252631;" />
            <br>
            <span style="font-size: 10px; color: #98a9bc;">退款订单数</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="height: 100px;">
          <el-avatar class="users" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
          </el-avatar>
          <div style="margin-left: 20px">
            <!-- <span style="font-size: 24px; color:  #252631; " >888</span> -->
            <count-to :start-val="0" :end-val="1888" :duration="1000" style="font-size: 24px; color:  #252631;" />
            <br>
            <span style="font-size: 10px; color: #98a9bc;">退款金额</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple-light " style="height: 460px;">
          <div id="maind"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple-light " style="height: 380px;">
          <div id="mains"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light " style="height: 380px;">
          <div id="mainss"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CountTo from 'vue-count-to' // 数字滚动
import * as echarts from 'echarts/core'; // 导入核心包
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  PieChart,
  LabelLayout,
]);
export default {
  components: {
    CountTo
  },
  name: 'MyMain',
  data() {
    return {
      // 日期选择
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: ''
    }
  },
  mounted() {
    // 订单统计
    var chartDom = document.getElementById('maind');

    var myChart = echarts.init(chartDom);
    // echarts  自适应宽度
    window.addEventListener('resize', function () {
      myChart.resize()
    })
    var option
    option = {
      title: {
        text: '营业趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['订单金额', '订单量', '退款金额', '退款订单量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单金额',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '订单量',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '退款金额',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '退款订单量',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },

      ]
    }
    option && myChart.setOption(option);
    //订单来源
    var chartDoms = document.getElementById('mains');
    var myCharts = echarts.init(chartDoms);
    var options;

    options = {
      title: {
        text: '订单来源分析',
        // subtext: 'Fake Data',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      series: [
        {
          name: '来源',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '商城' },
            { value: 735, name: '个人' },
            { value: 580, name: '推荐' },
            { value: 484, name: '热门' },
            { value: 300, name: '我的' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    options && myCharts.setOption(options);
    //订单类型分析
    var chartDomss = document.getElementById('mainss');
    var myChartss = echarts.init(chartDomss);
    var optionss;
    optionss = {
      title: {
        text: '订单类型分析',
        // subtext: 'Fake Data',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      series: [
        {
          name: '来源',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '普通订单' },
            { value: 735, name: '秒杀订单' },
            { value: 580, name: '砍价订单' },
            { value: 484, name: '拼团订单' },
            { value: 300, name: '预售订单' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    optionss && myChartss.setOption(optionss);
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/theme/handle.scss';

#maind {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  // display:flex;
  // justify-content: center;
  // align-items: center;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');

}

#mains {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  // display:flex;
  // justify-content: center;
  // align-items: center;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

#mainss {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  // display:flex;
  // justify-content: center;
  // align-items: center;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.indent {
  // width: 100%;
  // min-height: calc(100vh - 80px);
  // height: 1000vh;
  padding: 10px;
  // background-color: red;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.block {
  height: 30px;
  padding: 20px;
  align-items: center;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.picker {
  width: 200px;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.users {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;

}

.demonstration {
  // margin-right: 10px;
  color: #606266;
  font-size: 12px;
  display: inline-block;
  width: 80px;
  text-align: right;
  padding-right: 12px;

}

.el-row {
  margin-bottom: 16px;


  // margin-left: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;

}

.bg-purple-dark {
  background: #fff;
}

.bg-purple {
  background: #fff;
  padding: 20px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.bg-purple-light {
  background: #fff;
}



.grid-content {
  border-radius: 4px;
  min-height: 36px;
  // margin-left: 20px;
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');

  .grid-content>span {
    @include font_color('titleColor');
  }
}

.row-bg {
  // padding: 10px 0;
  background-color: #fff;
}
</style>
